Il est dsormais possible de dfinir et d'utiliser des variables directement en CSS, pas besoin de SCSS pour cela.

Dfinition

--main-bg-color: #2997ab;

C'est trs simple, il suffit de mettre "--", ensuite le nom de la variable, puis de la dfinir comme n'importe quelle proprit.

Utilisation

background-color: var(--main-bg-color);

Encore une fois, rien de plus simple, il vous suffit d'crire "var", puis le nom de la variable entre parenthses (y compris les "--").

Conseil pratique

En gnral, on dfinit les variables CSS l'intrieur du "root", comme ceci :

:root{ --main-bg-color: #2997ab; ... }

Ce slecteur permet de slectionner l'lment le plus haut hirarchiquement dans notre structure HTML (ce sera forcment la balise "html").

Cela revient donc faire :

html{ --main-bg-color: #2997ab; ... }

Mais je tenais vous montrer ce slecteur car il est plus que probable que vous le rencontriez par la suite !